vue 官网有如下一段话：

请注意如果你解构了 props 对象，解构出的变量将会丢失响应性。

原因：解构赋值，会让解构出的属性失去上下文对象。

代理中：上下文就是person对象（所谓：上下文，用于确定当前的this指向问题，这也是js沙箱实现原理）

js沙箱参考文件：
https://zhuanlan.zhihu.com/p/428039764
https://zhuanlan.zhihu.com/p/450103808

//模拟vue3中实现响应式
let person = {
    name: "张三",
    age: 15,
};
//我们管p叫做代理数据，管person叫源数据
const p = new Proxy(person, {
    //target代表的是person这个源对象，propName代表读取或者写入的属性名
    get(target, propName) {
        console.log("有人读取了p上面的propName属性");
        return target[propName];
    },
    //不仅仅是修改调用，增加的时候也会调用
    set(target, propName, value) {
        console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`);
        target[propName] = value;
        return true;
    },
    deleteProperty(target, propName) {
        console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`);
        return delete target[propName];
    },
});

let { name } = p;
console.log(name);
p.name = "ck";
console.log(name);